Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@spectrum-web-components/shared
Advanced tools
yarn add @spectrum-web-components/shared
The Focusable
subclass of LitElement
adds some helpers method and lifecycle coverage in order to support passing focus to a container element inside of a custom element. The Focusable base class handles tabindex setting into shadowed elements automatically and is based heavily on the aybolit delegate-focus-mixin at https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
import { Focusable } from '@spectrum-web-components/shared/lib/focusable';
import { html } from 'lit-element';
class FocusableButton extends Focusable {
public static get styles(): CSSResultArray {
return [...super.styles];
}
public get focusElement(): HTMLElement {
/* istanbul ignore if */
if (!this.shadowRoot) {
return this;
}
return this.shadowRoot.querySelector('#button') as HTMLElement;
}
protected render(): TemplateResult {
return html`
<button
id="button"
>
Focus for this button is being managed by the focusable base class.
</button>
`;
}
}
When working with <slot>
s and their slotchange
event, you will have the opportunity to capture when the nodes and/or elements in your element are added or removed. However, if the textContent
of a text node changes, you will not receive the slotchange
event because the slot hasn't actually received new nodes and/or elements in the exchange. When working with a lit-html binding <your-element>${text}</your-element>
that means you will not receive a slotchange
event when the value of text
goes from text = ''
to text = 'something'
or the other way. In these cases the ObserveSlotText
can be leverages to apply a mutation observe onto your element that tracks characterData
mutations so that you can resspond as desired.
import { ObserveSlotText } from '@spectrum-web-components/shared/lib/oberve-slot-text';
import { LitElement, html } from 'lit-element';
class ObserveSlotTextElement extends ObserveSlotText(LitElement, '#observing-slot') {
protected render(): TemplateResult {
return html`
<button
id="button"
>
<slot
id="observing-slot"
@slotchange=${this.manageObservedSlot}
></slot>
</button>
`;
}
protected updated(): void {
console.log(this.slotHasContent); // => true when <observing-slot-text-element>Text</observing-slot-text-element>
}
}
customElements.define('observing-slot-text-element', ObserveSlotTextElement);
FAQs
Shared mixins, tools, etc. that support developing Spectrum Web Components.
The npm package @spectrum-web-components/shared receives a total of 7,047 weekly downloads. As such, @spectrum-web-components/shared popularity was classified as popular.
We found that @spectrum-web-components/shared demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.